<template>
	<view class="container">
		<!-- 背景图片 -->
		<image class="bg-image" src="/static/image/bg/bg1.jpg" mode="aspectFill"></image>
		<!-- 专辑名称 -->
		<text class="bg-text">{{albumName}}</text>
		<!-- 歌曲列表 -->
		<uni-list>
		  <uni-list-chat 
		    v-for="(current, index) in audioList"
		    :key="index" 
		    :title="current.name"
		    :avatar="current.img" 
		    :note="current.author"
		    badge-text="收听" 
		    link
		    @click="goPlay(audioList)"  
		  >
		  </uni-list-chat>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				albumName:"",
				audioList:[]//音乐列表
			}
		},
		onLoad(options){
			console.log(options);
			//获取专辑名称
			this.albumName=options.name;
			//获取专辑ID
			const albumId=options.id;
			//根据专辑id，获取该专辑下的所有歌曲
			this.fetchMusicData(albumId);
		}, 
		methods: {
		  // 获取指定专辑下所有歌曲
		  fetchMusicData(albumId) {
		    uni.request({
		      url: `https://apifoxmock.com/m1/5460619-0-default/getAlbumById/${albumId}`,
		      method: 'GET',
		      success: (res) => {
		        if (res.statusCode === 200) {
		          // 请求成功
		          // console.log(res); 
		          this.audioList=res.data;
		        } else {
		          // 处理请求失败的情况
		          uni.showToast({
		            title: '获取音频详情失败，请稍后再试',
		            icon: 'none'
		          });
		        }
		      },
		      fail: (err) => {
		        // 处理网络错误
		        uni.showToast({
		          title: '网络错误，请稍后再试',
		          icon: 'none'
		        });
		      }
		    });
		  }, 
		  //跳转歌曲播放页
		  goPlay(audioList){ 
			  uni.navigateTo({
			  	url:`/pages/play/play?audioList=${encodeURIComponent(JSON.stringify(audioList))}`
			  });
		  }
		}  
	}  
</script>

<style lang="scss">
.container {
  
  // 背景图片
  .bg-image {
    position: relative;
    width: 100%;
    height: 30vh;
    object-fit: cover;
  }

  // 专辑名称
  .bg-text {
    position: absolute;
    top: 25vh;
    color: #fff;
    left: 50%;
    font-size: 30rpx;
    font-weight: bold;
    transform: translateX(-50%);
  }
}
</style>